<template>
  <div class="post-container">
    <van-field
      v-model.trim="content"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-button
      @click="btnComment"
      style="color:red"
      :disabled="content.length?false:true"
      class="comment-btn"
      type="default"
      size="small"
    >发布</van-button>
  </div>
</template>
           
<script>
import { addComment_api } from '@/api/comment.js'
export default {
  props: {
    /* 评论id */
    artId: {
      type: [String, Number,Object],
      default:null
    }
  },
  inject:{
    aId: {
      type: [String, Number,Object],
      default:null
    }
  } ,  //  文章id
  data() {
    return {
      content: ''
    }
  },
  methods: {
    async btnComment() {
      //  显示加载的过程
      // this.$toast('加载中。。。。')

      //  发送请求
      const { data: res } = await addComment_api({
        content: this.content,
        target: this.artId.toString(), // 评论id
        art_id: this.artId?this.aId:null //文章id
      })
      console.log(res,44444);

      this.content=''

      //关闭加载效果

      //  关闭对话框
      this.$emit('shouClose',res.data.new_obj)

      //  显示评论到列表上
      
    }
  }
}
</script>
<style scoped lang='less'>
.post-container {
  display: flex;
  align-items: center;
  /deep/.van-field__value {
    background: #eee;
  }

  .comment-btn.van-button--default {
    color: #323233;
    background-color: #fff;
    border: none;
    font-size: 30px;
  }

  .van-button--small {
    padding: 0;
    width: 100px;
  }
}
</style>